<template>
    <div class="cart">
        <div style="width: 95%;height: 90%;background-color: darkgrey;border-radius: 20px;">
            <!-- 标题，购物车 -->
            <div style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;background-color: gainsboro;border-radius: 20px 20px 0 0;">
                <h3>购物车</h3>
            </div>

            <!-- 列表区 -->
            <div style="width: 100%;height: 80%;padding: 15px;">
                <div class="cartList myFlex">
                    <el-table
                            :data="$store.state.cart"
                            border
                            style="width:100%;height: 100%;overflow: auto;"
                    >

                        <el-table-column
                                prop="name"
                                label="名称"
                                align="center"
                                width="50px"
                        >

                        </el-table-column>

                        <el-table-column
                                prop="count"
                                label="数量"
                                align="center"
                                width="50px"
                        >
                            <template slot-scope="scope">
                                <span>{{cartList[scope.$index].count}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column
                                prop="temper"
                                label="热 / 冷"
                                width="65"
                        >
                            <template slot-scope="scope">
                                <button @click="handleTemp(scope.$index, scope.row)" style="padding: 0">
                                    <el-switch
                                            v-model="scope.row.switchOn"
                                            inactive-color="#ff4949">
                                    </el-switch>
                                </button>
                            </template>
                        </el-table-column>


                        <el-table-column
                                prop="operation"
                                label="操作"
                                align="center"
                                fit
                        >
                            <template slot-scope="scope">
                                <div class="myFlex">

                                    <el-button
                                            size="mini"
                                            type="primary"
                                            @click="handleAdd(scope.$index, scope.row)"
                                            circle
                                            style="margin:2px;"
                                            v-if="!popable.get(cartList[scope.$index].name)"
                                    >十
                                    </el-button>

                                    <el-popconfirm
                                            confirm-button-text='好的'
                                            cancel-button-text=' '
                                            icon="el-icon-info"
                                            icon-color="red"
                                            title="库存不足，不能再添加~"
                                            v-else
                                    >
                                        <el-button slot="reference"
                                                   size="mini"
                                                   type="primary"
                                                   circle
                                                   style="margin:2px;"
                                        >
                                            十
                                        </el-button>
                                    </el-popconfirm>


                                    <el-button
                                            size="mini"
                                            type="primary"
                                            @click="handleReduce(scope.$index, scope.row)"
                                            style="margin:2px;"
                                            circle
                                    >一</el-button>


                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.$index, scope.row)"
                                            style="margin:2px;"
                                            circle
                                    >X</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <!-- 支付按钮区 -->
            <div style="width: 100%;height: 10%;display: flex;justify-content: space-around;align-items: center;background-color: gainsboro;border-radius: 0 0 20px 20px;">
                <el-button type="danger" size="small"  @click="toPaying" class="totalBtn">
                    总计：{{total}}元
                </el-button>

                <el-button type="primary" size="small" @click="handleClean" class="cleanBtn">
                    <span class="el-icon-delete"></span> 清空
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Cart",
        data(){
          return{
              total:0,
              cartList:this.$store.state.cart,
              popable:new Map()
          }
        },
        created() {
            for(let i in this.cartList){
                this.total += (this.cartList[i].price) * this.cartList[i].count
                this.popable.set(this.cartList[i].name,false)
            }
        },
        watch:{
            'cartList.length': {
                handler (to,from) {
                    let len = this.cartList.length
                    if(to > from){
                        this.total += this.cartList[len-1].price
                        this.popable.set(this.cartList[len-1].name,false)
                    }else {
                        console.log(this.popable)
                    }
                }
            }
        },
        methods:{
            toPaying(){
                this.$router.push('/paying')
            },
            handleTemp(index, row){
                if(row.switchOn===true){
                    console.log("now is on")
                    this.cartList[index].temperature = '制冷'
                }else {
                    console.log("now is close")
                    this.cartList[index].temperature = '加热'
                }
            },
            handleAdd(index, row){
                let freshItem = Object.assign({},this.cartList[index])

                freshItem.count++
                this.total +=  freshItem.price
                this.$store.commit('refreshCartItem',{index,freshItem})

                if(freshItem.count === freshItem.remain){
                    this.popable.set(freshItem.name,true)
                    return
                }

            },
            handleReduce(index, row){
                let freshItem = Object.assign({},this.cartList[index])

                if(freshItem.count == 1){
                    this.handleDelete(index, row)
                    return
                }

                if(freshItem.count === freshItem.remain){
                    this.popable.set(freshItem.name,false)
                }

                freshItem.count--
                this.total -=  freshItem.price
                this.$store.commit('refreshCartItem',{index,freshItem})
            },
            handleDelete(index, row){
                this.popable.delete(this.cartList[index].name)
                this.total -= this.cartList[index].count * this.cartList[index].price
                //没点过加号之前，绑定的还是同一个对象，点过加号之后，是新对象了，无法影响到橱窗里的对象,所以去 Showcase里解耦
                //this.cartList[index].clicked = false
                this.$store.commit('changeClicked',this.cartList[index].index)
                this.cartList.splice(index,1);
                this.$message({
                    message: '删除成功',
                    type: 'success',
                    offset:240,
                    duration:1000
                });
            },
            handleClean(){
                this.total = 0;
                for(let i in this.cartList){
                    this.$store.commit('changeClicked',this.cartList[i].index)
                }
                this.cartList.splice(0,this.cartList.length)
                this.popable = new Map()
                this.$message({
                    message: '购物车已清空',
                    type: 'success',
                    offset:240,
                    duration:1000
                });
            }
        }
    }
</script>

<style scoped>

    .myFlex{
        display: flex;
        justify-content: center;
        align-items: stretch;
    }

    .cart{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cartList{
        width: 100%;
        height: 100%;
        background-color: skyblue;
        border-radius: 20px;
    }

    .totalBtn{
        position: absolute;
        left: 70%;
    }

    .cleanBtn{
        position: absolute;
        right: 3%;
    }

    @media screen and (max-width: 1200px) {
        .totalBtn{
            position: absolute;
            left: 38%;
        }

        .cleanBtn{
            position: absolute;
            right: 7%;
        }
    }

</style>